<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    @ok="handleSubmit"
    :width="width"
    destroy-on-close
    @close="handleClose"
  >
    <template #title>
      {{ getTitle }}
    </template>
    <div v-if="refresh">
      <template v-if="isComplexRef">
        <component
          :preview="false"
          isUpdate
          detail
          v-model:active="activePage"
          :is="componentItem"
          :pageType="complexDataRef.pageType"
          :dataSource="complexDataRef.modelList"
          :buttons="complexDataRef.buttons"
          :record="modalParams.record"
          :moduleId="modalParams.moduleId"
        />
      </template>
      <component
        v-else
        :record="record"
        @register="register"
        :is="componentItem"
        :closeModal="handleClose"
        @success="handleSuccess"
        :allData="allData"
        :setModalProps="setDrawerProps"
        :modalParams="modalParams"
        :params="modalParams.params"
        :modelId="modalParams.modelId"
        :moduleId="modalParams.moduleId"
      />
    </div>
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { ref, Ref, markRaw } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { CustomFormRegister } from '../../types/custom';
  import { useComponent } from './useComponent';

  const emit = defineEmits(['success', 'register', 'cancel']);
  let getTitle: Ref<string | undefined> = ref();
  let width: Ref<string> = ref('50%');
  let componentItem: Ref<any> = ref(null);
  const record = ref(null);
  const allData = ref(null);
  const refresh = ref(false);
  const isComplexRef = ref(false);
  const complexDataRef = ref<Indexable>({});
  const modalParams = ref<Indexable>({});
  const activePage = ref(0);

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    record.value = data.data;
    allData.value = data;
    refresh.value = true;
    const {
      moduleId,
      dataModelId,
      dynamicParams,
      record: rowRecord,
      params,
      title,
      parentModel,
    } = data.btnItem || {};

    modalParams.value = {
      moduleId,
      modelId: dataModelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      record: rowRecord,
      params,
      title,
      parentModel,
    };
    setDrawerProps({
      loading: true,
      confirmLoading: true,
    });

    const { component, isComplex, complexData } = await useComponent(data.btnItem);

    componentItem.value = markRaw(component);

    isComplexRef.value = isComplex;
    complexDataRef.value = complexData || {};

    getTitle.value = data.paramsObj?.title || data.btnItem.label;
    width.value = data.btnItem.width || width.value;
    setDrawerProps({
      loading: false,
      confirmLoading: false,
    });
  });

  function handleClose() {
    closeDrawer();
    modalParams.value = {};
    refresh.value = false;
    componentItem.value = '';
    emit('cancel');
  }
  let registerObj: any = {};
  const register = (val: CustomFormRegister) => {
    registerObj = val;
    registerObj.modalParams && setDrawerProps(registerObj.modalParams);
  };

  const handleSubmit = async () => {
    let values = await registerObj.validate();
    registerObj.submit(values);
  };

  const handleSuccess = (data) => {
    emit('success', data);
  };
</script>

<style lang="less" scoped></style>
